<template>
    <div class="dir-left-nowrap cross-center index-navigation">
        <div class="box-grow-0 main-center cross-center title">
            <span>发布</span>
        </div>
        <div class="box-grow-1 main-around list">
            <div class="box-grow-1 dir-left-nowrap main-center item" v-for="item in menuNavList" :key="item.url">
                <NuxtLink class="dir-top-nowrap cross-center nav" :to="item.url">
                    <img class="icon" :src="item.icon">
                    <div class="nav-title">{{ item.title }}</div>
                </NuxtLink>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="IndexNavigation">
import { NuxtLink } from "#components";

/**菜单导航 */
const menuNavList = [
    {
        title: 'COS',
        icon: '/imgs/index/cos.png',
        url: '/article/edit?type=1'
    },
    {
        title: '绘画',
        icon: '/imgs/index/drawing.png',
        url: '/article/edit?type=2'
    },
    {
        title: '写作',
        icon: '/imgs/index/writing.png',
        url: '/article/edit?type=3'
    },
    {
        title: '日常',
        icon: '/imgs/index/daily.png',
        url: '/article/edit?type=4'
    }
]

</script>

<style lang='scss' scoped>
.index-navigation {
    width: 1220px;
    height: 280px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
    border-radius: 10px;
    border-image: linear-gradient(159deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 2 2;

    .title {
        position: relative;
        width: 80px;
        height: 100%;

        &::before {
            content: "";
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            background: #FFFFFF;
            box-shadow: 5px 1px 10px 0px rgba(0, 0, 0, 0.05);
            border-radius: 10px;
            border: 1px solid #9DCBFF;
            transform: perspective(15px) rotateY(1.5deg);
            transform-origin: left;
        }

        span {
            position: absolute;
            letter-spacing: 10px;
            font-size: 18px;
            font-weight: 500;
            color: #333333;
            line-height: 25px;
            writing-mode: vertical-rl;
        }

    }

    .list {
        .item {
            position: relative;
            padding: 10px 0;

            &+.item {
                border-left: 1px dashed #D9D9D9;
            }

            .nav {
                cursor: pointer;
                gap: 8px;

                .icon {
                    width: 100px;
                    height: 100px;
                }

                .nav-title {
                    font-size: 14px;
                    font-weight: 600;
                    color: #333333;
                }
            }
        }
    }
}
</style>